<template>
  <el-container class="mobile-container">
    <el-header class="mobile-header">
      <span class="mobile-title">设备信息</span>
      <el-button class="mobile-button" type="primary" @click="handleLogin"
        >访客登录</el-button
      >
    </el-header>

    <el-main v-loading="loading" class="detail-container">
      <!-- 设备详情卡片 -->
      <el-card v-if="deviceInfo" class="detail-card">
        <div class="detail-item">
          <span class="label">设备编号：</span>
          <span class="value">{{ deviceInfo.deviceCode || '-' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">系列号：</span>
          <span class="value">{{ deviceInfo.serialNo || '-' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">订单编号：</span>
          <span class="value">{{ deviceInfo.orderCode || '-' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">当前速度：</span>
          <span class="value">{{ deviceInfo.speed }} RPM</span>
        </div>

        <div class="detail-item">
          <span class="label">圈数：</span>
          <span class="value">{{ deviceInfo.circleCount }} 次</span>
        </div>

        <div class="detail-item">
          <span class="label">瑕疵数：</span>
          <el-tag :type="deviceInfo.defectCount > 0 ? 'danger' : 'success'">
            {{ deviceInfo.defectCount || 0 }}
          </el-tag>
        </div>

        <div class="detail-item">
          <span class="label">停机报警数：</span>
          <span>{{ deviceInfo.stopAlarmCount ?? 0 }} 次</span>
        </div>

        <div class="detail-item">
          <span class="label">检测状态：</span>
          <span class="value">{{ deviceInfo.checkStatus || '-' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">报警状态：</span>
          <el-tag :type="deviceInfo.isAlarmState ? 'danger' : 'success'">
            {{ deviceInfo.isAlarmState ? '异常' : '正常' }}
          </el-tag>
        </div>

        <div class="detail-item">
          <span class="label">异常原因：</span>
          <el-tag :type="deviceInfo.isAlarmState ? 'danger' : 'success'">
            {{ deviceInfo.isAlarmState ? deviceInfo.downtimeReason : '无异常' }}
          </el-tag>
        </div>
        <div class="detail-item">
          <span class="label">最后在线：</span>
          <span class="value">{{ formatTime(deviceInfo.lastOnlineTime) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">负责人：</span>
          <span class="value">{{ deviceInfo.careTaker || '未分配' }}</span>
        </div>
      </el-card>

      <el-empty v-else description="未找到设备信息" />
    </el-main>
  </el-container>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getQrCodeData } from '@/api/clothrequest.js'
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
const deviceInfo = ref(null)
const loading = ref(false)

const formatTime = (timeStr) => {
  return timeStr ? dayjs(timeStr).format('YYYY-MM-DD HH:mm') : '-'
}

const getDeviceInfo = async () => {
  const devId = route.query.devId

  if (!devId) {
    ElMessage.error('无效的设备标识')
    return router.push('/error')
  }

  try {
    loading.value = true
    const res = await getQrCodeData({ devId: devId })

    if (res.data?.code === 1) {
      deviceInfo.value = res.data.data
    } else {
      ElMessage.warning(res.data?.message || '设备数据异常')
      deviceInfo.value = null
    }
  } catch (error) {
    ElMessage.error(
      error.response?.data?.message || error.message || '服务不可用'
    )
    console.error('接口异常:', error)
  } finally {
    loading.value = false
  }
}

const handleLogin = () => {
  router.push('/login')
}

watch(
  () => route.query.devId,
  (newVal) => {
    if (newVal) getDeviceInfo()
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .mobile-container {
    padding: 0 10px;
  }

  .mobile-header {
    height: auto !important;
    padding: 15px 10px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .mobile-title {
      font-size: 18px !important; /* 标题缩小 */
    }
  }

  .mobile-button {
    width: 100%;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  :deep(.el-table__row) .el-table__cell:last-child {
    min-width: 160px !important; /* 防止时间换行 */
  }

  .detail-card {
    border-radius: 8px;
  }

  .detail-item {
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;

    .label {
      width: auto;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .value {
      font-size: 13px;
    }
  }
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #ebeef5;

  .title {
    color: #077aee;
    font-size: 20px;
    font-weight: bold;
  }
}

.custom-button {
  background-color: #077aee;
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: bold;

  &:hover {
    background-color: #0669c8;
  }
}

.el-main {
  background: white;
  border-radius: 12px;
}

.detail-container {
  padding: 15px;
}

.detail-card {
  margin: 0 auto;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;

  .label {
    width: 100px;
    color: #077aee;
    font-weight: 500;
  }

  .value {
    flex: 1;
    color: #606266;
  }

  &:last-child {
    border-bottom: none;
  }
}
</style>
